<template>
	<view class="wai">
		<view class="bgi">
			<image class="img-bgi" src="@/static/wallet_card.png" mode=""></image>
			<view class="yuan">抵用券</view>
			<view class="mony">{{userProfile.coin}}</view>
		</view>
		<view class="btm">
			<view>激活额度</view>
			<view class="flex">
				<!-- <view class="qq">¥</view> -->
				<input class="input" type="number" placeholder="输入抵用券额度" @input="iptAmount"/>
			</view>
			<view class="btn" @click="jihuo">激活</view>
		</view>
	</view>
</template>

<script setup>
	import {
		user,
		quanjihuo
	} from '@/api/index.js';
	import {
		utils
	} from '@/utils/utils.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	onShow(() => {
		userInfo(); //获取用户信息
	});
	const amount = ref(0)
	const userProfile = ref({}); //存储用户信息
	// 获取用户信息
	const userInfo = async () => {
		const ret = await user();
		if (ret.code == 1) {
			userProfile.value = ret.data;

			// console.log('个人信息', userProfile.value);
		} else {
			utils('数据加载失败！');
		}
	};
	const iptAmount = async(e)=>{
		amount.value = Number(e.detail.value)
	}
	const jihuo = async () => {
		if(Number(amount.value)>Number(userProfile.coin)||isNaN(Number(amount.value))){
			uni.showToast({
				icon:'none',
				title:'输入积分不正确，请重新输入'
			})
			return false
		}
		const ret = await quanjihuo({
			amount: amount.value
		});
		if (ret.code == 1) {
			uni.showToast({
				title: ret.msg
			})
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				})
			}, 1000)
			// console.log('个人信息', userProfile.value);
		} else {
			utils(ret.msg);
		}
	}
</script>

<style lang="scss" scoped>
	.wai {
		.btm {
			.btn {
				width: 528rpx;
				height: 80rpx;
				background: #ff9b29;
				border-radius: 50rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
				margin: 108rpx auto 200rpx;
			}

			.flex {
				.input {
					flex: 1;
				}

				.qq {
					color: #333333;
					font-size: 64rpx;
					margin-right: 30rpx;
					font-weight: 400;
				}

				display: flex;
				align-items: center;
				height: 105rpx;
				margin-top: 54rpx;
				padding-bottom: 12rpx;
				border-bottom: 2rpx solid #e6e6e6;
			}

			background-color: #fff;
			padding: 40rpx 20rpx;
			border-radius: 20rpx;
			margin-top: 38rpx;
			color: #333333;
			font-size: 32rpx;
		}

		.bgi {
			.mony {
				color: #ffffff;
				font-size: 72rpx;
				position: absolute;
				left: 38rpx;
				top: 106rpx;
			}

			.yuan {
				position: absolute;
				top: 42rpx;
				left: 38rpx;
				color: #ffffff;
				font-size: 32rpx;
			}

			.img-bgi {
				width: 686rpx;
				height: 264rpx;
			}

			position: relative;
		}

		padding: 22rpx 32rpx;
		min-height: 100vh;
		background-color: #f7f7f7;
	}
</style>